<template>
	<view class="container">
		<!-- 头部标题 -->
		<view class="header">
			<text class="title">工单管理</text>
		</view>
		
		<!-- 工单搜索筛选 -->
		<view class="search-bar">
			<view class="search-input">
				<image src="/static/icons/search.png" mode="aspectFit" class="search-icon"></image>
				<input type="text" placeholder="搜索工单" v-model="searchText" @confirm="searchTickets" />
			</view>
			<view class="filter-btn" @tap="showFilterPopup">
				<text>筛选</text>
				<text class="filter-icon">▼</text>
			</view>
		</view>
		
		<!-- 工单状态标签 -->
		<view class="status-tabs">
			<view 
				v-for="(tab, index) in statusTabs" 
				:key="index" 
				:class="['status-tab', activeStatus === tab.value ? 'active' : '']"
				@tap="switchStatus(tab.value)"
			>
				<text>{{ tab.label }}</text>
				<text class="count">{{ tab.count }}</text>
			</view>
		</view>
		
		<!-- 工单列表 -->
		<view class="ticket-list">
			<view v-if="tickets.length === 0" class="empty-state">
				<text>暂无相关工单</text>
			</view>
			<view v-else class="list-content">
				<view 
					v-for="(ticket, index) in tickets" 
					:key="index" 
					class="ticket-item"
					@tap="viewTicketDetail(ticket.id)"
				>
					<view class="ticket-header">
						<text class="ticket-id">#{{ ticket.id }}</text>
						<view :class="['ticket-status', ticket.status]">
							<text>{{ getStatusText(ticket.status) }}</text>
						</view>
					</view>
					<view class="ticket-content">
						<text class="ticket-title">{{ ticket.title }}</text>
						<text class="ticket-desc">{{ ticket.description }}</text>
					</view>
					<view class="ticket-footer">
						<view class="ticket-info">
							<text class="ticket-time">{{ ticket.createTime }}</text>
							<text class="ticket-priority">{{ getPriorityText(ticket.priority) }}</text>
						</view>
						<view class="ticket-action">
							<text>详情</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 新建工单按钮 -->
		<view class="create-btn" @tap="createNewTicket">
			<text>+</text>
		</view>
		
		<!-- 筛选弹窗 -->
		<uni-popup ref="filterPopup" type="bottom">
			<view class="filter-popup">
				<view class="popup-header">
					<text class="cancel" @tap="closeFilterPopup">取消</text>
					<text class="title">筛选条件</text>
					<text class="confirm" @tap="applyFilter">确定</text>
				</view>
				<view class="filter-content">
					<view class="filter-item">
						<text class="filter-label">工单状态</text>
						<view class="filter-options">
							<view 
								v-for="(status, index) in allStatus" 
								:key="index" 
								:class="['filter-option', filterOptions.status === status.value ? 'selected' : '']"
								@tap="selectStatus(status.value)"
							>
								{{ status.label }}
							</view>
						</view>
					</view>
					<view class="filter-item">
						<text class="filter-label">优先级</text>
						<view class="filter-options">
							<view 
								v-for="(priority, index) in allPriorities" 
								:key="index" 
								:class="['filter-option', filterOptions.priority === priority.value ? 'selected' : '']"
								@tap="selectPriority(priority.value)"
							>
								{{ priority.label }}
							</view>
						</view>
					</view>
					<view class="filter-item">
						<text class="filter-label">时间范围</text>
						<view class="date-range">
							<view class="date-picker" @tap="showDatePicker('start')">
								<text>{{ filterOptions.startDate || '开始日期' }}</text>
							</view>
							<text class="date-separator">至</text>
							<view class="date-picker" @tap="showDatePicker('end')">
								<text>{{ filterOptions.endDate || '结束日期' }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="filter-footer">
					<view class="reset-btn" @tap="resetFilter">
						<text>重置</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import api from '../common/api.index.js';
import config from '../config/config.js';

export default {
	data() {
		return {
			searchText: '',
			activeStatus: 'all',
			statusTabs: [
				{ label: '全部', value: 'all', count: 0 },
				{ label: '待分配', value: 'pending', count: 0 },
				{ label: '处理中', value: 'processing', count: 0 },
				{ label: '已完成', value: 'completed', count: 0 }
			],
			tickets: [],
			allStatus: config.TICKET_STATUS,
			allPriorities: config.TICKET_PRIORITY,
			filterOptions: {
				status: '',
				priority: '',
				startDate: '',
				endDate: ''
			},
			currentPage: 1,
			pageSize: 10,
			totalCount: 0,
			isLoading: false
		}
	},
	onLoad() {
		this.loadTickets();
		this.loadStatusCounts();
	},
	methods: {
		async loadTickets() {
			try {
				this.isLoading = true;
				
				// 构建请求参数
				let params = {
					page: this.currentPage,
					pageSize: this.pageSize,
					keyword: this.searchText
				};
				
				// 添加状态筛选
				if (this.activeStatus !== 'all') {
					params.status = this.activeStatus;
				}
				
				// 添加筛选条件
				if (this.filterOptions.status) {
					params.status = this.filterOptions.status;
				}
				
				if (this.filterOptions.priority) {
					params.priority = this.filterOptions.priority;
				}
				
				if (this.filterOptions.startDate) {
					params.startDate = this.filterOptions.startDate;
				}
				
				if (this.filterOptions.endDate) {
					params.endDate = this.filterOptions.endDate;
				}
				
				// 请求API
				// 模拟数据代替实际API调用
				// const response = await api.ticket.getTicketList(params);
				
				// 模拟数据
				const mockTickets = [
					{
						id: '1001',
						title: '空调故障维修工单',
						description: '3号楼2层办公室空调出现异常噪音，需要维修',
						status: 'pending',
						priority: 'high',
						createTime: '2023-04-10 09:30'
					},
					{
						id: '1002',
						title: '照明系统维护工单',
						description: '会议室灯光控制系统无法正常工作，需要检查',
						status: 'processing',
						priority: 'medium',
						createTime: '2023-04-09 15:45'
					},
					{
						id: '1003',
						title: '安防设备检修工单',
						description: '大门监控摄像头画面模糊，需要调整或更换',
						status: 'completed',
						priority: 'low',
						createTime: '2023-04-08 11:20'
					}
				];
				
				this.tickets = mockTickets;
				this.totalCount = mockTickets.length;
				
			} catch (error) {
				console.error('加载工单失败:', error);
				uni.showToast({
					title: '加载工单失败',
					icon: 'none'
				});
			} finally {
				this.isLoading = false;
			}
		},
		
		async loadStatusCounts() {
			try {
				// 实际应该调用API
				// const response = await api.ticket.getTicketCounts();
				
				// 模拟数据
				const mockCounts = {
					all: 10,
					pending: 3,
					processing: 5,
					completed: 2
				};
				
				// 更新状态标签的数量
				this.statusTabs = this.statusTabs.map(tab => ({
					...tab,
					count: mockCounts[tab.value] || 0
				}));
				
			} catch (error) {
				console.error('加载工单统计失败:', error);
			}
		},
		
		switchStatus(status) {
			if (this.activeStatus === status) return;
			this.activeStatus = status;
			this.currentPage = 1; // 重置到第一页
			this.loadTickets();
		},
		
		searchTickets() {
			this.currentPage = 1; // 重置到第一页
			this.loadTickets();
		},
		
		showFilterPopup() {
			this.$refs.filterPopup.open();
		},
		
		closeFilterPopup() {
			this.$refs.filterPopup.close();
		},
		
		selectStatus(status) {
			this.filterOptions.status = status;
		},
		
		selectPriority(priority) {
			this.filterOptions.priority = priority;
		},
		
		showDatePicker(type) {
			// 实现日期选择器
			uni.showToast({
				title: '日期选择功能开发中',
				icon: 'none'
			});
		},
		
		applyFilter() {
			this.currentPage = 1; // 重置到第一页
			this.loadTickets();
			this.closeFilterPopup();
		},
		
		resetFilter() {
			this.filterOptions = {
				status: '',
				priority: '',
				startDate: '',
				endDate: ''
			};
		},
		
		viewTicketDetail(ticketId) {
			uni.navigateTo({
				url: `/pages/tickets/detail?id=${ticketId}`
			});
		},
		
		createNewTicket() {
			uni.navigateTo({
				url: '/pages/tickets/create'
			});
		},
		
		getStatusText(status) {
			const statusObj = this.allStatus.find(item => item.value === status);
			return statusObj ? statusObj.label : '未知';
		},
		
		getPriorityText(priority) {
			const priorityObj = this.allPriorities.find(item => item.value === priority);
			return priorityObj ? priorityObj.label : '未知';
		}
	}
}
</script>

<style>
.container {
	padding: 30rpx;
	background-color: #f5f7fa;
	min-height: 100vh;
	position: relative;
}

/* 头部样式 */
.header {
	margin-bottom: 30rpx;
}

.title {
	font-size: 40rpx;
	font-weight: bold;
	color: #333;
}

/* 搜索栏样式 */
.search-bar {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30rpx;
}

.search-input {
	display: flex;
	align-items: center;
	background-color: #fff;
	border-radius: 30rpx;
	padding: 15rpx 30rpx;
	flex: 1;
	margin-right: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.search-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 15rpx;
}

.search-input input {
	flex: 1;
	font-size: 28rpx;
}

.filter-btn {
	display: flex;
	align-items: center;
	background-color: #fff;
	border-radius: 30rpx;
	padding: 15rpx 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.filter-btn text {
	font-size: 28rpx;
	color: #333;
}

.filter-icon {
	font-size: 20rpx;
	margin-left: 10rpx;
}

/* 状态标签样式 */
.status-tabs {
	display: flex;
	background-color: #fff;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.status-tab {
	flex: 1;
	padding: 20rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-bottom: 4rpx solid transparent;
}

.status-tab.active {
	border-bottom-color: #007AFF;
}

.status-tab text {
	font-size: 28rpx;
	color: #333;
}

.status-tab.active text {
	color: #007AFF;
}

.status-tab .count {
	font-size: 24rpx;
	color: #999;
	margin-top: 8rpx;
}

/* 工单列表样式 */
.ticket-list {
	margin-bottom: 100rpx;
}

.empty-state {
	padding: 100rpx 0;
	text-align: center;
}

.empty-state text {
	color: #999;
	font-size: 28rpx;
}

.ticket-item {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.ticket-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.ticket-id {
	font-size: 28rpx;
	color: #666;
}

.ticket-status {
	padding: 6rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
}

.ticket-status.pending {
	background-color: #faad14;
	color: #fff;
}

.ticket-status.processing {
	background-color: #1890ff;
	color: #fff;
}

.ticket-status.completed {
	background-color: #52c41a;
	color: #fff;
}

.ticket-content {
	margin-bottom: 20rpx;
}

.ticket-title {
	font-size: 32rpx;
	color: #333;
	font-weight: 500;
	margin-bottom: 10rpx;
}

.ticket-desc {
	font-size: 28rpx;
	color: #666;
	line-height: 1.5;
}

.ticket-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ticket-info {
	display: flex;
	align-items: center;
}

.ticket-time {
	font-size: 24rpx;
	color: #999;
	margin-right: 20rpx;
}

.ticket-priority {
	font-size: 24rpx;
	color: #ff4d4f;
}

.ticket-action {
	padding: 8rpx 20rpx;
	border: 1px solid #007AFF;
	border-radius: 30rpx;
}

.ticket-action text {
	font-size: 24rpx;
	color: #007AFF;
}

/* 新建工单按钮 */
.create-btn {
	position: fixed;
	right: 40rpx;
	bottom: 80rpx;
	width: 100rpx;
	height: 100rpx;
	background-color: #007AFF;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4rpx 20rpx rgba(0, 123, 255, 0.3);
	z-index: 10;
}

.create-btn text {
	color: #fff;
	font-size: 60rpx;
	line-height: 1;
}

/* 筛选弹窗样式 */
.filter-popup {
	background-color: #fff;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	padding-bottom: 50rpx;
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1px solid #f0f0f0;
}

.popup-header .title {
	font-size: 32rpx;
	font-weight: bold;
}

.cancel, .confirm {
	font-size: 28rpx;
}

.cancel {
	color: #999;
}

.confirm {
	color: #007AFF;
}

.filter-content {
	padding: 30rpx;
}

.filter-item {
	margin-bottom: 30rpx;
}

.filter-label {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.filter-options {
	display: flex;
	flex-wrap: wrap;
}

.filter-option {
	padding: 10rpx 20rpx;
	border: 1px solid #ddd;
	border-radius: 30rpx;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
	font-size: 28rpx;
	color: #666;
}

.filter-option.selected {
	background-color: #007AFF;
	color: #fff;
	border-color: #007AFF;
}

.date-range {
	display: flex;
	align-items: center;
}

.date-picker {
	flex: 1;
	padding: 15rpx 0;
	border-bottom: 1px solid #ddd;
	text-align: center;
}

.date-separator {
	padding: 0 20rpx;
	color: #999;
}

.filter-footer {
	padding: 0 30rpx;
}

.reset-btn {
	padding: 20rpx 0;
	text-align: center;
	border: 1px solid #ddd;
	border-radius: 8rpx;
}

.reset-btn text {
	font-size: 28rpx;
	color: #666;
}
</style> 